// 聊天室
import React, { useState, useRef } from 'react';
import { Drawer, Avatar,Input, Image, Upload, Button, message } from 'antd';
import {
    UserOutlined,
    FolderOutlined,
    SmileOutlined,
    GatewayOutlined,
    SendOutlined,
    FileTextOutlined,
    EllipsisOutlined
} from '@ant-design/icons';
import '../style.css';
import ProHeaderAvatar from "./component/ProHeaderAvatar";
// 分页加载
import InfiniteScroll from 'react-infinite-scroller';
// 截图机器
import ImageEditor from 'image-editor-little';
const {TextArea} = Input;
const { Dragger } = Upload;

const WeMain = () => {
    const [isDrawerShow, setIsDrawerShow] = useState(false);
    const weChatMainRef: any = useRef(); // 可以获得
    const [loading] = useState<boolean>(false);
    const [hasMore] = useState<boolean>(true);
    // 上传
    const props = {
        name: 'file',
        action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
        headers: {
            authorization: 'authorization-text',
        },
        onChange(info: any) {
            if (info.file.status !== 'uploading') {
                console.log(info.file, info.fileList);
            }
            if (info.file.status === 'done') {
                message.success(`${info.file.name} file uploaded successfully`);
            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },
    };
    // 分页加载
    const handleInfiniteOnLoad = () => {
        console.log(111);
    };
    // 他人聊天气泡
    const renderOtherMessage = () => {
        return(
            <>
                <div className='messageOther messageContent'>
                    <div className="messageContentItem">
                        <div className="messageContentAvatar">
                            <Avatar size={44} icon={<UserOutlined />} />
                        </div>
                        <div className='messageContentTxt messageContentTxtMT2'>
                            Type something Type something
                            Type something Type something
                            Type something Type something
                        </div>
                    </div>
                </div>
                <div className='messageOther messageContent'>
                    <div className="messageContentItem">
                        <div className="messageContentAvatar">
                            {/*<Avatar size={44} icon={<UserOutlined />} />*/}
                        </div>
                        <div className='messageContentFile'>
                            <div className="messageContentIcon">
                                <FileTextOutlined />
                            </div>
                            <div className="messageContentDetail">
                                <div className='messageContentFileNameBox'>
                                    <div className="fileName">
                                        Yeastar.txt
                                    </div>
                                    <div className='fileSize'>
                                        123kb
                                    </div>
                                </div>
                                <div>
                                    <EllipsisOutlined />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div className='messageOther messageContent'>
                    <div className="messageContentItem messageContentTxtMT6">
                        <div className="messageContentAvatar">
                            {/*<Avatar size={44} icon={<UserOutlined />} />*/}
                        </div>
                        <div className='messageContentImg'>
                            <Image
                                width={279}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                            />
                        </div>
                    </div>
                </div>
            </>
        )
    };
    // 自己聊天气泡
    const renderMyselfMessage = () => {
        return(
            <>
                <div className='messageMyself'>
                    <div className="messageContentItem">
                        <div className='messageContentTxt messageContentTxtMT2'>
                            Type something
                        </div>
                        <div className="messageContentAvatar">
                            <Avatar size={44} icon={<UserOutlined />} />
                        </div>
                    </div>
                </div>
                <div className='messageMyself'>
                    <div className="messageContentItem">
                        <div className='messageContentFile'>
                            <div className="messageContentIcon">
                                <FileTextOutlined />
                            </div>
                            <div className="messageContentDetail">
                                <div className='messageContentFileNameBox'>
                                    <div className="fileName">
                                        Yeastar.txt
                                    </div>
                                    <div className='fileSize'>
                                        123kb
                                    </div>
                                </div>
                                <div>
                                    <EllipsisOutlined />
                                </div>
                            </div>
                        </div>
                        <div className="messageContentAvatar">
                            {/*<Avatar size={44} icon={<UserOutlined />} />*/}
                        </div>
                    </div>
                </div>
                <div className='messageMyself' >
                    <div className="messageContentItem">
                        <div className="messageContentImg messageContentTxtMT6">
                            <Image
                                width={279}
                                src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
                            />
                        </div>
                        <div className="messageContentAvatar">
                            {/*<Avatar size={44} icon={<UserOutlined />} />*/}
                        </div>
                    </div>
                </div>
            </>
        )
    };
    // 聊天框底部
    const renderWeChatMainFooter = () => {
        return(
            <div className='weChatMainFooter'>
                <div className='weChatMainToolsBox'>
                    <SmileOutlined className="firstTools"/>
                    <GatewayOutlined  className="secondTools"/>
                    <FolderOutlined className="thirdTools"/>
                </div>
                <div className='weChatMainInputBox'>
                    <div className='weChatMainInputWrap'>
                        {
                            true &&
                            <Dragger {...props}>
                                <p >Drop your files here</p>
                            </Dragger>
                        }
                        {
                            false && <TextArea
                                autoSize={{ minRows: 1, maxRows: 6 }}
                                maxLength={5000}
                                placeholder="Message Fanny Jensen"
                                bordered={false}
                                style={{
                                    background: "#F5F6FA",
                                    borderRadius: 4,
                                    fontSize: 12,
                                    color:"#333",
                                    height: 42,
                                    lineHeight: 2,
                                    maxHeight: 176,
                                    resize:"none"
                                }}
                            />
                        }
                    </div>
                    <div className='weChatMainInputBoxSent'>
                        <SendOutlined />
                    </div>
                </div>
            </div>
        )
    };
    return(
        <div className='weChatMainContainer' ref={weChatMainRef}>
            <div className='weChatMainWrap'>
                <div className='weChatMainHeader'>
                    <ProHeaderAvatar />
                    <div >
                        <Button
                            className='tool'
                            type="primary"
                            shape="circle"
                            icon={<UserOutlined />}
                            style={{
                                width: 38,
                                height: 38
                            }}
                        />
                        <Button
                            className='tool'
                            type="primary"
                            shape="circle"
                            icon={<UserOutlined />}
                            style={{
                                width: 38,
                                height: 38
                            }}
                        />
                        <Button
                            className='tool'
                            type="primary"
                            shape="circle"
                            icon={<UserOutlined />}
                            style={{
                                width: 38,
                                height: 38
                            }}
                        />
                    </div>
                </div>
                <div className='weChatMainContent' id="weChatMainContent">
                    <InfiniteScroll
                        initialLoad={false}
                        pageStart={0}
                        loadMore={handleInfiniteOnLoad}
                        hasMore={!loading && hasMore}
                        useWindow={false}
                    >
                        <div className='weChatMainContentItem'>
                            <div className='messageTime'>
                                Today 19:22
                            </div>
                            {
                                renderOtherMessage()
                            }
                            {
                                renderMyselfMessage()
                            }
                        </div>
                    </InfiniteScroll>
                </div>
                {
                    renderWeChatMainFooter()
                }
            </div>
            <Drawer
                title="Basic Drawer"
                mask={false}
                onClose={() => setIsDrawerShow(false)}
                visible={isDrawerShow}
                getContainer={false}
                style={{ position: 'absolute'}}
            >
                <p>Some contents...</p>
                <p>Some contents...</p>
                <p>Some contents...</p>
            </Drawer>
        </div>
    )
};

export default React.memo(WeMain)